<template>
<!-- 
Teleport 提供了一种干净的方法 让组件的html\的父组件界面外的特定标签下插入显示

 -->
  <h2>ModelButton组件</h2>
  <button @click="modelOpen = true">打开一个对话框</button>
  <Teleport to="body">
    <div v-if="modelOpen">
      <div>这是对话框</div>
      <button @click="modelOpen = false">关闭对话框</button>
    </div>
  </Teleport>
</template>
<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "ModelButton",
  setup() {
    const modelOpen = ref(false);
    return {
      modelOpen,
    };
  },
});
</script>

<style lang="less" scoped>
</style>
